<script lang="ts" setup>
const props = defineProps<{
  total: number;
  order: OrderInfoResp | null;
  expired: boolean;
}>();

const emit = defineEmits<{
  (e: "payOrder", order: OrderInfoResp): void;
  (e: "createOrder"): void;
  (e: "cancelOrder", order: OrderInfoResp): void;
}>();

const btnText = computed(() => {
  return props.order ? "支付订单" : "创建订单";
});

const handleCancel = () => {
  emit("cancelOrder", props.order);
};

const handleBtnClick = () => {
  if (props.order) {
    emit("payOrder", props.order);
  } else {
    emit("createOrder");
  }
};
</script>

<template>
  <div class="h-16"></div>
  <div
    class="fixed bottom-0 left-0 right-0 px-4 py-2 bg-white flex gap-3 items-center b-t-1 b-t-solid b-t-gray-1"
  >
    <div class="grow">
      <span class="inline-block pr-2 text-sm c-gray-4">实付</span>
      <span class="text-sm text-red-5">￥</span>
      <span class="text-2xl text-red-5">{{ props.total/100 }}</span>
    </div>
    <nut-button v-if="props.order" plain @click="handleCancel">取消</nut-button>
    <nut-button
      class="shrink-0 basis-1/3"
      type="primary"
      @click="handleBtnClick"
      :disabled="props.expired"
      >{{ btnText }}</nut-button
    >
  </div>
</template>
